<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<% 
String path = request.getContextPath(); 
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE html>
<html>
<head>
<base href=" <%=basePath%>"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="天天书城订单管理">
<meta name="author" content="xwj">
<title>订单管理</title>
<link href="bootstrap/bootstrap.css" rel="stylesheet">
<!--external css-->
<link href="css/admin_css/assets/font-awesome/css/font-awesome.css"
	rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/css/zabuto_calendar.css">
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/js/gritter/css/jquery.gritter.css" />
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/lineicons/style.css">

<!--  Custom styles for this template -->
<link href="css/admin_css/assets/css/style.css" rel="stylesheet">
<link href="css/admin_css/assets/css/style-responsive.css"
	rel="stylesheet">
	 <link rel="stylesheet" type="text/css" href="jsutil/sweetalert.css">
	<style type="text/css">
	#order_table td{
	/* text-align:center;
	valign:middle; */
	algin:left;
	}
	#selectByKey{
	text-algin:right;
	
	}
	</style>
<script src="jquery/jquery-2.2.4.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
	<!-- js placed at the end of the document so the pages load faster -->
 <script class="include" type="text/javascript"
		src="css/admin_css/assets/js/jquery.dcjqaccordion.2.7.js"></script> 
	<script src="css/admin_css/assets/js/jquery.scrollTo.min.js"></script>
	<script src="css/admin_css/assets/js/common-scripts.js"></script> 
	<!-- 分页工具 -->
		<script type="text/javascript" src="jsutil/pagetool.js"></script>
		<!-- 时间处理工具 -->
		<script type="text/javascript" src="jsutil/timeutil.js"></script>
 <!-- 弹出框工具 -->		 
  <script src="jsutil/sweetalert.min.js"></script> 
    
<script>
var pageNum = 1;
$(function(){
	getOrders(pageNum);
});


//分页查询
function getOrders(pageNum) {
	//获取订单状态
	var oState=$("#setOstate").val();
	var ukey=$("#ukey").val();
	var bkey=$("#bkey").val();
	var onum=$("#onum").val();
	$.ajax({
			url : "orderMsg/getAllOrderListByCondition.do", // 请求地址
				type : "POST", // 请求类型
				async : "true", // 是否异步方式
				data : {
					"num" : pageNum,
					"ostate":oState,
					"ukey":ukey,
					"bkey":bkey,
					"onum":onum
				},
				dataType : "json", // 返回数据格式
				success : function(data) {
					var tbodys = $("tbody").empty();
					if (data.res >0) {
						if(data.num==0){
							tbodys.append("<tr>"
							+"<td colspan='10' style='text-align:center;'><h1>没有满足条件的信息！</h1></td></tr>");
						}
						else{
						$.each(data.list,function(index, element) {
							var getState=element.ostate;
							//状态名
							var stateName;
							if(getState==1){
								stateName="待发货";
							}else if(getState==2){
								stateName="待收货";
							}else if(getState==3){
								stateName="待评价";
							}else{
								stateName="已完成";
							}
							//订单时间
						var d = new Date(element.otime);  
						var oTime=formatDateTime(d); 
					var tr = "<tr><td>"
						+"<h5>&nbsp</h5>"
						+"<h4>"+ (index + 1)+"</h4>"
						+ "<input type='hidden' value='"+element.oid+"'></td>"
						+ "<td>"
						+"<h5>&nbsp</h5>"
						+ "<h5>"+element.onum+"</h5>"
						+"<h5>&nbsp</h5>"
						+ "</td>"
						+ "<td><br>"
						+"<img src='"+element.books.bpicurl+"' class='img-responsive' onclick='getDT(this)' width='60px' />"
						+"</td>"
						+"<td>"
						+"<h5>编号:"+element.books.bnum+"</h5>"
						+"<h5>书名:"+element.books.bname+"</h5>"
						+"<h5>作者:"+element.books.bauthor+"</h5>"
						+"</td>"
						+"<td>"
						+"<h5>单价:"+element.bprice+"</h5>"
						+"<h5>实付单价:"+element.oprice+"</h5>"
						+"<h5>实付总金额:"+element.oprice*element.onumber+"</h5>"
						+"</td>"
						+"<td>"
						+"<h5>&nbsp</h5>"
						+"<h4>"+element.onumber+"</h4>"
						+"<h5>&nbsp</h5>"
						+"</td>"
						+"<td>"
						+"<h5>用户名"+element.user.uname+"</h5>"
						+"<h5>地址"+element.oaddress+"</h5>"
						+"<h5>电话"+element.otel+"</h5>"
						+"</td>"
						+"<td>"
						+"<h5>&nbsp</h5>"
						+"<h6>"+oTime+"</h6>"
						+"<h5>&nbsp</h5>"
						+"</td>"
						+"<td>"
						+"<h5>&nbsp</h5>"
						+"<h5>"+stateName+"</h5>"
						+"<h5>&nbsp</h5>"
						+"</td>"
						+"<td>"
						+"<h5>&nbsp</h5>"
						+"<div>"
						+"<input type='hidden' id='order"+element.oid+"'/>"
						+"</div></td>"
						;
												
						tbodys.append(tr);
						 var p=$("#order"+element.oid).parent();
	 					
	 					  if(element.ostate==1){
	 						p.prepend("<button class='button btn btn-success' onclick='changeOstate("+element.oid+")'>确定发货</button>");
	 					}else if(element.ostate==2){
	 						p.prepend("<button class='button btn btn-warning' name='' onclick='getRemind()'>提醒收货</button>");
	 						
	 					}else if(element.ostate==3){
	 						p.prepend("<button class='button button-pill button-tiny' name='' onclick=''>删除订单</button>");
	 						
	 					}else if(element.ostate==4){
	 						p.prepend("<button class='button btn' name='' onclick='detail("+element.books.bid+")'>查看书籍</button>");
	 					}
										});
						}
						setPage(pageNum, data.totalPage, "getOrders");
					}

				}
			});

}


//改变订单状态
function changeOstate(oid) {
	 swal(
             {title:"您确定已发货！",
                 text:"发货后将无法恢复，请谨慎操作！",
                 type:"warning",
                 showCancelButton:true,
                 confirmButtonColor:"#DD6B55",
                 confirmButtonText:"确定！",
                 cancelButtonText:"取消",
                 closeOnConfirm:false,
                 closeOnCancel:false
             },
             function(isConfirm)
             {
                 if(isConfirm)
                 {
                 	$.ajax({
         				url : 'orderMsg/changeOrderStatus.do',
         				type : 'POST',
         				async : "true",
         				data:{"oid":oid,
         				"ostate":2	
         				},
         				dataType : 'json',
         				success : function(data) {
         					if (data.res>0) {
         						sweetAlert("成功", "操作成功!", "success");
         						getOrders(1);
         						
         					}else{
         						sweetAlert("失败", "发货失败！", "error");
         					}
         				}
         			});
                 }
                 else{
                     swal({title:"已取消",
                         text:"您取消了操作！",
                         type:"error"})
                 }
             }
         )
	
}
//收货提醒
function getRemind(){
	sweetAlert("成功", "已向买家发出通知O(∩_∩)O哈哈~", "success");
	}
	//重置表单
	function resetForm(){
		$('#selectForm')[0].reset();
		getOrders(1);
	}
	
	//大图
function getDT(obj){
	var _this = $(obj);//将当前的pimg元素作为_this传入函数  
    imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
}
function imgShow(outerdiv, innerdiv, bigimg, _this){  
    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
    $(bigimg).attr("src", src);//设置#bigimg元素的src属性  
  
        /*获取当前点击图片的真实大小，并显示弹出层及大图*/  
    $("<img/>").attr("src", src).load(function(){  
        var windowW = $(window).width();//获取当前窗口宽度  
        var windowH = $(window).height();//获取当前窗口高度  
        var realWidth = this.width;//获取图片真实宽度  
        var realHeight = this.height;//获取图片真实高度  
        var imgWidth, imgHeight;  
        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
          
        if(realHeight>windowH*scale) {//判断图片高度  
            imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
            imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
            if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
                imgWidth = windowW*scale;//再对宽度进行缩放  
            }  
        } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
            imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
        } else {//如果图片真实高度和宽度都符合要求，高宽不变  
            imgWidth = realWidth;  
            imgHeight = realHeight;  
        }  
                $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放  
          
        var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
        var h = (windowH-imgHeight)/2;//计算图片与窗口上边距  
        $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性  
        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
    });  
      
    $(outerdiv).click(function(){//再次点击淡出消失弹出层  
        $(this).fadeOut("fast");  
    });  
}  
</script>
	
</head>
<body>


	<section id="container">

		<%@include file="header.jsp" %>

			<!--sidebar start-->
		<aside>
			<div id="sidebar" class="nav-collapse ">
				<!-- sidebar menu start-->
				<ul class="sidebar-menu" id="nav-accordion">

					<p class="centered">
						<a href="admin/adminmag.jsp"><img
							src="images/admin7.png" class="img-circle"
							width="60"></a>
					</p>
					<h5 class="centered">${admin.aname}</h5>

					<li class="mt"><a href="admin/index.jsp"> <i
							class="fa fa-bar-chart-o"></i> <span>销售统计</span>
					</a></li>

					<li class="sub-menu"><a  href="javascript:;">
							<i class="fa fa-book"></i> <span>书籍</span>
					</a>
						<ul class="sub">
							<li ><a href="admin/bookmag.jsp">书籍管理</a></li>
							<li ><a href="admin/categorymag.jsp">类别管理</a></li>

						</ul></li>

					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-users"></i> <span>账户</span>
					</a>
						<ul class="sub">
							<li><a href="admin/usermag.jsp">用户管理</a></li>
							<li><a href="admin/adminmag.jsp">管理员管理</a></li>

						</ul></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-user"></i> <span>会员</span>
					</a>
						<ul class="sub">
							<li><a href="admin/membermag.jsp">会员折扣管理</a></li>

						</ul></li>
					<li class="sub-menu"><a class="active"  href="javascript:;"> <i
							class="fa fa-shopping-cart"></i> <span>订单</span>
					</a>
						<ul class="sub">
							<li class="active"><a href="admin/ordermag.jsp">订单管理</a></li>
						</ul></li>

				</ul>
				<!-- sidebar menu end-->
			</div>
		</aside>
		<!--sidebar end-->
		<!-- **********************************************************************************************************************************************************
     以上是不变的内容--包括上边header和左边aside33###以下是变化的内容
      *********************************************************************************************************************************************************** -->

		<!--main content start-->
		<section id="main-content">

			<section class="wrapper">
				<h3>
					<i class="fa fa-angle-right"></i> 订单信息管理
				</h3>
				<div class="row mt" id="selectByKey">
					<div class="col-lg-12">
						<div class="form-panel">
							<h5 class="mb">
								<i class="fa fa-angle-right"></i>查询
							</h5>
							<form class="form-inline" role="form" id="selectForm">
								<div class="form-group">
									<input type="text" class="form-control" id="onum" onchange="getOrders(1)"
										placeholder="请输入订单编号">
								</div>
								<div class="form-group">
					
									<input type="text" class="form-control" id="ukey" onchange="getOrders(1)"
										placeholder="请输入用户信息等关键字">
								</div>
								<div class="form-group">
									<input type="text" class="form-control" id="bkey" onchange="getOrders(1)"
										placeholder="请输入书的信息等关键字">
								</div>

								

								<div class="form-group">
									<select class="form-control" id="setOstate" onchange="getOrders(1)">
										<option value='-1'>-----订单状态------</option>
										<option value='1'>待发货</option>
										<option value='2'>待收货</option>
										<option value='3'>待评价</option>
										<option value='4'>已完成</option>
									</select>
								</div>
								
								<button type="button" class="btn btn-primary" onclick="getOrders(1)">查询</button>
								<button type="button" class="btn btn-warning" onclick="resetForm()">重置</button>
							</form>
						</div>
						<!-- /form-panel -->
					</div>
					<!-- /col-lg-12 -->
				</div>
				<!-- /row -->


				<div class="row mt">
					<div class="col-md-12">
						<div class="content-panel">
							<table class="table table-striped table-advance table-hover" id="order_table">
								<!--   	  <h4><i class="fa fa-angle-right"></i> 订单信息</h4>  -->

								<thead>
									<tr>
									<th class="hidden-phone">#</th>
										<th class="hidden-phone"><i class="fa fa-bullhorn"></i> 订单编号</th>
										<th class="hidden-phone"><i class="fa fa-bullhorn"></i> 图片</th>
										<th><i class="fa fa-bullhorn"></i> 书基本信息</th>
										<th><i class="fa fa-bullhorn"></i> 金额</th>
										<th ><i class="fa fa-bullhorn"></i> 数量</th>
										<th><i class="fa fa-bullhorn"></i> 联系方式</th>
										<th><i class="fa fa-bullhorn"></i> 下单时间</th>
										<th><i class="fa fa-bullhorn"></i> 状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
								
								</tbody>
							</table>
						</div>
						<!-- /content-panel -->
					</div>
					<!-- /col-md-12 -->

				</div>
			
					<div class="" id="mypage">
								<jsp:include flush="fasle" page="/jsutil/pagetool.jsp" />
							</div>
			</section>

		</section>
		<!-- /MAIN CONTENT -->

		<!--main content end-->
		<!--footer start-->
		<%@include file="footer.jsp"%>
		<!--footer end-->

	</section>
	<!-- 图片弹出层 -->
	<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
	</div>    
	
</body>
</html>